import * as React from 'react';
import * as ReactDOM from 'react-dom';

const $ = require("jquery");



/* info  显示一般详情控件*/
var Areashow = React.createClass({
    getInitialState: function() {
        return {
            cssType: {
                "normal": "",
                "warn": "warn-one",
                "money": "warn-money"
            }
        };
    },
    getDefaultProps: function() {
        return {
            title: "大哥啊  title值呢   值呢  你逗我呀",
            showContent: "",
            type: 1,
            csslength: 1,
            isShowColon: true
        }
    },
    render: function() {
        return (
            <div className="info-area">
                        <label className="info-title">{this.props.title}{this.props.isShowColon?"：":""}</label>
                        <div className="info-show-area one">
                            <p className="info-content">{this.props.showContent}</p>
                        </div>
                </div>
        )
    }
})



// info  显示图片控件
var AreaImageshow = React.createClass({
    getDefaultProps: function() {
        return {
            src: "55555555555555555555"
        }
    },
    handClick: function() {
        console.info("sdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd");
        var $parent = $(ReactDOM.findDOMNode(this));
        var $target = $("img", $parent);
        this.props.handClick($target);
        /*
            var $parent = $(ReactDOM.findDOMNode(this));
            var $target = $("img",$parent);
            var width = $target[0].naturalWidth;
            var wwindth = $(window).width();
            var wheigth = $(window).height();
            var height = $target[0].naturalHeight;
            var left = (wwindth-180-width)/2+180;
            var top = (wheigth-49-height)/2+49;


            $parent.css({
                "left":left<0?0:left,
                "top":top<0?0:top,
                "width":width>wwindth?wwindth:width,
                "height":height>wheigth?wheigth:height,
                "overflow":"scroll",
                "position": "fixed"
            });
            $target.css({
                "width":width,
                "height":height
            });
*/
    },
    render: function() {
        var src = "http://7qn8hl.com1.z0.glb.clouddn.com/" + this.props.src
        return (
            <div className="info-iamge-area" onClick={this.handClick}>
                    <img src={src}/>
                </div>
        )
    }
})

// info  显示图片控件
var AreaQuanhow = React.createClass({
    getDefaultProps: function() {
        return {
            upStep: '',
            upText: "值呢？",
            downText: "值呢？",
            isGray: false
        }
    },
    render: function() {
        var css = "quan " + (this.props.isDone ? "normal" : "gray");
        return (
            <div className={css}>
                    <div className="quan-big"></div>
                    <div className="quan-small">
                        <span className="quan-step">{this.props.upStep}</span>
                        <p className="quan-title">{this.props.upText}</p>
                        <p className="quan-auth">{this.props.downText}</p>
                    </div>
                    <div className="quan-line"></div>
                </div>
        )
    }
})


// info  显示图片控件
var Log = React.createClass({
    getDefaultProps: function() {
        return {
            time: "日志time值呢？",
            content: "日志内容值呢？",
        }
    },
    render: function() {
        var css = "quan " + (this.props.isGray ? "normal" : "gray");
        return (
            <p className="log-row">
                    <span className="log-time">{this.props.time}</span>
                    <span className="log-content ">{this.props.content}</span>
                </p>
        )
    }
})



// info  显示图片控件
var Head = React.createClass({
    getDefaultProps: function() {
        return {
            title: "head设置个title",
            content: "日志内容值呢？",
        }
    },
    render: function() {
        var css = "quan " + (this.props.isGray ? "normal" : "gray");
        return (
            <div className="info-head row">
                        <p className="title">{this.props.title}</p>
                    </div>
        )
    }
})


var TableHead = React.createClass({
    getDefaultProps: function() {
        return {
            title: "head设置个title",
        }
    },
    render: function() {
        return (
            <th>{this.props.title}</th>
        )
    }
})



module.exports = {
    Areashow: Areashow,
    AreaImageshow: AreaImageshow,
    AreaQuanhow: AreaQuanhow,
    Log: Log,
    Head: Head,
    TableHead: TableHead
}